
<!-- 
@descrition: '' 
@auth: '' 
-->
<template>
	<view class="wc-gift-pack-item">
		<view class="goods-images" >
			<!-- widthFix aspectFill -->
			<u-image lazy-load width="100%" height="100%" :src="row[imageField]" mode="aspectFill" :show-loading="true" :show-error="true">
				<template v-slot:loading>
					 <u-loading mode="circle" :show="true" />
				</template>
				<view slot="error" style="font-size: 24rpx;height: 50rpx;;padding: 40rpx;">加载失败</view>
			</u-image>
		</view>
		<view class="goods-content">
			<view class="goods-name">
			   <view class="gift-pack__good-title line-1">
					<text>{{ row[nameField] }}</text>
			   </view>
			   <view class="gift-pack__good-sub-title line-1">
					<text>{{ row.sub_name }}</text>
			   </view>
			</view>
			<!-- 价格 -->
			<view class="goods-other">
				<!-- 左 -->
				<view>
					<view class="">
						<price
							:content="row[minPriceField]" 
							color="#999999" 
							mainSize="26rpx"
							minorSize="26rpx" 
							:line-through="true" 
						>
							<view slot="prefix">
								<text style="margin-right: 10rpx;">原价</text>
							</view>
						</price>
					</view>
					<view class="m-t-10">
						<price
							:content="row[sellPriceField]" 
							color="#F42D41" 
							mainSize="26rpx"
							minorSize="26rpx" 
							:font-weight="700"
						>
							<template v-slot:content-label>
								<view class="content-lable2" >礼包价</view>
							</template>
						</price>
					</view>
					
				</view>
				<view>
					<!-- <button class="buy-btn" plain="true" @click.stop="buyHandler">立即购买</button> -->
				</view>
				
			   <!-- <view class="original-price">原价¥ 120.00</view> -->
			</view>
		</view>
	</view>
</template>

<script>
/**
	 * @descrition: '' 
	 * @auth: '' 
	 */
	export default {
		props: {
			row: {
				type: Object,
				default() {
					return {}
				}
			},
			imageField: {
				type: String,
				default: 'image'
			},
			nameField: {
				type: String,
				default: 'name'
			},
			subNameField: {
				type: String,
				default: 'name'
			},
			// 划线价的字段
			minPriceField: {
				type: String,
				default: 'lineation_price'
			},
			// 礼包价
			sellPriceField: {
				type: String,
				default: 'sell_price'
			},
		
			// 价格
			price: {
			    type: [String, Number],
			    default: 0
			},
			// 划线价
			minPrice: {
			    type: [String, Number, Boolean],
			    default: false
			},
			
			// 卡片样式
			containStyle: {
			    type: Object,
			    default: () => {}
			},
			
			// 图片样式
			imageStyle: {
			    type: Object,
			    default: () => {}
			},
			disableMsg: {
			    type: String,
			    default: ''
			}
		},
		data() {
			return {}
		},
		computed: {
			
		},
		watch:{},
		created() {},
		mounted() {},
		methods: {
			buyHandler() {
				console.log(this.row)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wc-gift-pack-item {
	    display: flex;
		flex-direction: row;
		align-items: center;
		height: 250rpx;
		padding: 20rpx;
	    border-radius: 7px;
	    background-color: #ffffff;
	    overflow: hidden;
	}
	.goods-images {
	    box-sizing: border-box;
	    width: calc(250rpx - 2 * 20rpx);
	    height: calc(250rpx - 2 * 20rpx);
	    border-radius: 7px;
	    overflow: hidden;
	    position: relative;
	  
	}
		
	.goods-content {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		height: 100%;
		margin-left: 20rpx;
		.goods-other {
		    display: flex;
		    flex-direction: row;
		    justify-content: space-between;
			align-items: center;
		}
		
	}
	.gift-pack__good-title {
		width: 420rpx;
		color: #101010;
		font-size: 30rpx;
		font-weight: 600;
	}
	.gift-pack__good-sub-title {
		width: 420rpx;
		font-size: 25rpx;
		color: #333333;
	}
	.original-price {
		
	}
	.content-lable2 {
		padding: 5rpx;
		font-size: 26rpx;
		color: #F42D41;
		background: rgba(244,45,65, 0.2);
		border-radius: 5rpx;
		
	}
	.buy-btn {
		width: 143rpx;
		height: 55rpx;
		padding: 0;
		line-height: 55rpx;
		text-align: center;
		font-size: 30rpx;
		color: #ffffff;
		background: linear-gradient(90deg, #FF7302 0%, #FF3333 100%);
		border: none;
	}
	.goods-name {
	    font-size: $-font-size-nr;
	    color: #333333;
	    overflow: hidden;
	}
	.invalid {
	    opacity: 0.7;
	}
</style>